<template>
	<view>
		<u-sticky :offsetTop="0">
			<uni-nav-bar title="乐宝通市场" left-icon="back" :status-bar="true" @clickLeft="$tab.back()" :border="false"
				right-width="172rpx" background-color="transparent" color="#FFF">
				<block class="" slot="right">
					<view class="buyBtn text-FFF font-700 text-center text-28" @click="asktobuy">
						求购
					</view>
				</block>
			</uni-nav-bar>
			<view class="navTop">
				<view class="navContent flex flex-col items-center justify-around">
					<view class="text-28 text-8A4104"> 乐宝通求购总量(个) </view>
					<view class="text-48 text-8A4104">
						{{ demandNums }}
					</view>
					<view class="search flex align-center justify-between px-16">
						<view class="flex align-center">
							<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/icon_search@2x.png" mode=""></image>
							<input type="text" class="ml-12" placeholder="请输入订单号搜索" v-model="demandNo" />
						</view>
						<view class="searchBtn text-28 text-center" @click="refresh"> 搜索 </view>
					</view>
				</view>
				<view class="myOrder" @click="goMyOrder"> 我的订单 </view>
			</view>
		</u-sticky>

		<view class="px-20 mt-20">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false"
				:showUpFinish="false">
				<view class="px-32 bg-FFF round-16 mb-16 py-32" v-for="(item, index) in list" :key="item.id" @click="showDeal(item)">
					<view class="flex align-center justify-between" style="width: 100%">
						<view class="flex align-center">
							<image :src="item.createUserTemp.avatar" mode="" class="round image-1"></image>
							<view class="text-32  ml-12">
								{{ item.createUserTemp.nickName }}
							</view>
						</view>

					</view>

					<view class="mb-24">
						<u-line color="#F6F6F6"></u-line>
					</view>
					<view class="text-32 text-F40600 flex align-center justify-between">
						<view class=""> 求购量：{{ item.nums }} </view>
						<view class=""> 求购单价：{{ item.price }} </view>
					</view>

					<view class="fontS-24 mt-20">
						<view class="">
							<view class="">
								<text class="text-grey">订单编号：</text>{{ item.demandNo }}
							</view>
							<view class="mt-20">
								<text class="text-grey">发布时间：</text>{{ item.createTime }}
							</view>
						</view>
						<view class="flex align-center mt-20">
							<view class=""> 支付方式: </view>
							<view class="fontS-20 ml-16 border-r4 text-FFF" style="padding: 4rpx 12rpx" :style="{
                  background: item.payWay == 1 ? '#49C43C' : '#3BADFF',
                }">
								{{ item.payWay == 1 ? "微信" : "支付宝" }}
							</view>
						</view>
					</view>

					<view class="" v-if="item.isDeal">
						<view class="mt-32">
							<u-line color="#F6F6F6"></u-line>
						</view>
						<view class="text-28 flex align-center justify-between">
							<input type="text" class="buyNum px-28" placeholder="请输入交易数量" v-model="item.sakeNum" />
							<view class="saleConfirm font-700 text-FFF text-center" @click.stop="saleConfirm(item)">
								卖出
							</view>
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>

		<u-popup :show="isBuy" mode="center" @close="isBuy = false" bgColor="transparent" :closeable="true">
			<view class="buyPopup round-20 py-32">
				<view class="flex flex-col align-center">
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/qianggoufenshu@2x.png" style="width: 176rpx;"
						mode="widthFix"></image>
					<view class="text-28 text-C5B28A mt-12"> 今日单价 </view>
					<view class="text-36 text-B38E45 mt-12 font-700">
						<text class="text-28">￥</text>
						{{ payForm.price }}
					</view>
					<view class="buyForm">
						<input type="number" placeholder="请输入购买数量" placeholder-style="color:#8F7E5D;"
							v-model="payForm.nums" @input="numsChange" />
						<input type="text" class="mt-24" placeholder="预计支付金额" placeholder-style="color:#8F7E5D;"
							disabled :value="payForm.totalPrice" />
						<input type="text" class="mt-24" placeholder="最低起收" placeholder-style="color:#8F7E5D;"
							v-model="payForm.minSellNum" />
					</view>
					<view class="text-B38E45 text-28"> 支付方式 </view>
					<view class="payWayBox flex align-center mt-28 fontS-24">
						<view class="flex flex-col align-center" @click="payForm.payWay = 2">
							<image :src="
                  payForm.payWay == 2
                    ? 'http://img.kxjb1319.com/gsgxStatic/zhifubao.png'
                    : 'http://img.kxjb1319.com/gsgxStatic/zhifubao_touming.png'
                " mode=""></image>
							<view class="mt-10" :style="{
                  color: payForm.payWay == 2 ? '#728619' : '#B4C062',
                }">
								支付宝
							</view>
						</view>
						<view class="flex flex-col align-center ml-40" @click="payForm.payWay = 1">
							<image :src="
                  payForm.payWay == 1
                    ? 'http://img.kxjb1319.com/gsgxStatic/weixin.png'
                    : 'http://img.kxjb1319.com/gsgxStatic/weixin_touming.png'
                " mode=""></image>
							<view class="mt-10" :style="{
                  color: payForm.payWay == 1 ? '#728619' : '#B4C062',
                }">
								微信
							</view>
						</view>
					</view>
				</view>
				<view class="confirm text-FFF text-center" @click="confirm">
					立即发布
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Decimal from "decimal.js";
	export default {
		data() {
			return {
				isBuy: false,
				demandNums: 0,
				payForm: {
					releaseType: 1,
					nums: null,
					price: 0,
					payWay: 2, //1微信
					state: 1,
					totalPrice: null,
					minSellNum: '',
					fruiteType: 0
				},
				list: [],
				demandNo:"",

				userInfo: this.$store.getters.userInfo
			};
		},
		onShow() {
			this.getData();
			this.refresh();
		},
		methods: {
			asktobuy() {
				let phoneReg =
					/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (phoneReg.test(this.userInfo.nickName)) {
					this.$modal.msg('请先修改昵称!昵称不能为手机号!')
					return
				}
				this.getData()
				this.isBuy = true
			},
			goMyOrder() {
				uni.navigateTo({
					url: "/pages/mine/market/list",
				});
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					this.$Api.currency.marketDemandAppList({
							pageSize: 10,
							pageNum: pullScroll.page,
							demandNo:this.demandNo
						})
						.then((res) => {
							console.log(res, "需求列表");
							res.rows = res.rows || [];
							if (pullScroll.page == 1) {
								this.list = [];
							}
							res.rows.forEach((item) => {
								item.isDeal = false;
							});
							this.list = [...this.list, ...res.rows];
							if (this.list.length >= res.total) {
								pullScroll.finish();
							} else {
								pullScroll.success();
							}
						});
				}, 500);
			},
			showDeal(item) {
				this.list.forEach((i) => {
					i.isDeal = false;
					i.sakeNum = null;
				});
				item.isDeal = true;
			},
			makePhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			async getData() {
				// 查今日单价
				const price = await this.$Api.currency.getTodayPrice();
				console.log(price, "单价");
				this.payForm.price = price.data.todayPrice;
				this.demandNums = price.data.demandNums;
			},
			numsChange() {
				// 使用Decimal重新定义今日单价用来精确计算
				// 加法：使用 plus() 方法进行加法运算。
				// 减法：使用 minus() 方法进行减法运算。
				// 减法：使用 minus() 方法进行减法运算。
				// 除法：使用 dividedBy() 方法进行除法运算。
				if (this.payForm.nums) {
					var pattern = /^\d+$/;
					if (!pattern.test(this.payForm.nums)) {
						this.$modal.msg("只能是整数!");
					} else {
						let todayPrice = new Decimal(this.payForm.price);
						let userBuyPrice = new Decimal(this.payForm.nums);
						this.payForm.totalPrice = todayPrice.times(userBuyPrice).toFixed(2);
					}
				} else {
					this.payForm.totalPrice = "";
				}
			},
			async saleConfirm(item) {
				if(item.payWay == 1 && !this.$store.getters.userInfo.wxQrCode){
					this.$modal.msg("请先上传微信收款码!");
					return;
				}
				
				if(item.payWay == 2 && !this.$store.getters.userInfo.zfbQrCode){
					this.$modal.msg("请先上传支付宝收款码!");
					return;
				}
				
				var pattern = /^\d+$/;
				if (!pattern.test(item.sakeNum)) {
					this.$modal.msg("只能为整数!");
					return;
				}
			
				let form = {
					nums: item.sakeNum,
					price: item.price,
					payWay: item.payWay, //1微信
					pid: item.id,
				};
				const res = await this.$Api.currency.releaseSellMarketDemand({
					...form,
				});
				console.log(res, "卖出");
				this.refresh();
				this.$modal.msg("操作成功，请在市场订单查看!");
			},
			async confirm() {
				var pattern = /^\d+$/;
				if (this.payForm.nums < 20 || !pattern.test(this.payForm.nums)) {
					this.$modal.msg("最少20求购且为整数!");
					return;
				}
				
				if(this.payForm.minSellNum == '' && this.payForm.minSellNum >= this.payForm.nums){
					this.$modal.msg("最低起收必填且不能大于求购数!");
					return;
				}
				
				const res = await this.$Api.currency.releaseMarketDemand({
					...this.payForm,
				});
				this.payForm = {
					releaseType: 1,
					nums: null,
					price: 0,
					payWay: 2, //1微信
					state: 1,
					totalPrice: null,
					minSellNum: '',
					fruiteType: 0
				}
				console.log(res, "求购");
				this.$modal.msg("发布成功");
				this.refresh();
				this.isBuy = false;
			},
		},
	};
</script>

<style lang="scss">
	page {
		background: #EED69D;
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	/deep/ .u-sticky {
		top: 0 !important;
	}

	.buyBtn {
		width: 172rpx;
		height: 68rpx;
		background: url("https://file.fulewanjia.com/fulewanjia/profile/appImages/common/qiugou@2x.png") 0 0 no-repeat;
		background-size: 100% 100%;
		line-height: 68rpx;
	}

	.navTop {
		height: 530rpx;
		background: url("https://file.fulewanjia.com/fulewanjia/profile/appImages/common/img_lebaotong.png") 0 0 no-repeat;
		background-size: 100% 100%;
		position: relative;

		.myOrder {
			position: absolute;
			left: 0;
			top: 290rpx;
			padding: 16rpx;
			background-color: #FB7848;
			color: #FFF;
			border-radius: 0 100rpx 100rpx 0;
			z-index: 10000;
		}

		.navContent {
			width: 710rpx;
			height: 370rpx;
			position: absolute;
			top: 160rpx;
			left: 20rpx;
			z-index: 9;
			padding: 50rpx 0 96rpx 0;
		}

		.search {
			width: 520rpx;
			height: 68rpx;
			background: #eed69d;
			border-radius: 34rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			input {
				color: #bc7118;
			}

			.searchBtn {
				width: 120rpx;
				height: 60rpx;
				background: linear-gradient(180deg, #ffaf6d 0%, #ad6a33 100%);
				border-radius: 30rpx;
				color: #eed69d;
				line-height: 60rpx;
			}
		}
	}

	.buyPopup {
		width: 620rpx;
		background: linear-gradient(180deg, #FEF3DD 0%, #FFD88B 100%);

		.buyClose {
			width: 64rpx;
			height: 64rpx;
			position: absolute;
			right: 40rpx;
			top: 192rpx;
		}

		.fruiteType {
			width: 622rpx;

			.fruite {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.buyForm {
			width: 622rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 24rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			input {
				width: 480rpx;
				height: 68rpx;
				background: #F9DA9C;
				font-size: 28rpx;
				padding: 0 16rpx;
				border-radius: 4rpx;
			}
		}

		.payWayBox {
			image {
				width: 140rpx;
				height: 88rpx;
			}
		}

		.confirm {
			width: 280rpx;
			height: 80rpx;
			position: absolute;
			left: 50%;
			bottom: -120rpx;
			transform: translateX(-50%);
			background: linear-gradient(180deg, #E64A3A 0%, #EF0000 100%);
			border-radius: 196rpx 196rpx 196rpx 196rpx;
			line-height: 80rpx;
		}
	}

	.image-1 {
		width: 56rpx;
		height: 56rpx;
	}

	.buyNum {
		width: 476rpx;
		height: 68rpx;
		border-radius: 78rpx 78rpx 78rpx 78rpx;
		border: 2rpx solid #B8B8B8;
	}

	.saleConfirm {
		width: 146rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: url("https://file.fulewanjia.com/fulewanjia/profile/appImages/common/icon_maichu@2x.png") 0 0 no-repeat;
		background-size: 100% 100%;
	}
</style>